<template>
  <el-dialog
    title="任务结论"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="600px"
    @close="$emit('closeDialog', '')"
  >
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="任务结论">
        <el-input v-model="form.conclusion" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="相关附件">
        <el-upload
          ref="upload"
          :action="uploadUrl"
          :headers="headers"
          :file-list="fileList"
          :limit="1"
          :on-change="handleChangeFile"
          :on-success="onSuccess"
          :on-preview="handlePreview"
          :on-exceed="onExceed"
          :on-remove="onRemove"
          accept=".jpg,.pdf,.doc,.docx"
          :before-upload="beforeUpload"
          :auto-upload="true"
        >
          <el-button icon="el-icon-upload" size="small"> 上传文件</el-button>
          <div slot="tip" class="el-upload__tip">支持文件格式：.jpg .pdf ，单个文件不能超过5M</div>
        </el-upload>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="$emit('closeDialog', '')">取 消</el-button>
      <el-button size="small" type="primary" @click="submitForm('form')">确认完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { requestTaskConclusionCreate } from '@/api/warning-task/task'
import { mapGetters } from 'vuex'

export default {
  name: 'TaskDialog',
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    managementId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      form: {
        annexUrl: '',
        annexName: '',
        conclusion: '',
        managementId: '',
      },
      headers: {},
      uploadUrl: process.env.VUE_APP_BASE_API + 'jtx/task/management/upload',
      fileList: [],
    }
  },
  computed: {
    ...mapGetters({
      token: 'token',
    }),
  },
  created() {
    this.headers = {
      Authorization: this.token,
    }
  },
  methods: {
    submitForm(formname) {
      this.form.managementId = this.managementId
      requestTaskConclusionCreate(this.form).then((res) => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.$emit('closeDialog', '')
          this.$store.dispatch('tagsView/delView', this.$route).then(() => {
            this.$router.back()
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
    onExceed() {
      this.$message.warning(`当前限制上传1个附件，请删除后继续上传！`)
    },
    handlePreview(val) {
      console.log(val)
      window.open(val.response.data.url, '_blank')
    },
    onRemove(file, fileList) {
      this.fileList = []
      this.form.annexUrl = null
    },
    handleChangeFile(file, fileList) {
      if (!file) return
      const isLt2M = file.size / 1024 / 1024 <= 5
      if (!isLt2M) {
        this.$refs.upload.clearFiles()
        this.$message({
          message: '单个文件大小不能超过 5MB!',
          type: 'warning',
        })
        return false
      }
      this.fileList = fileList
    },
    onSuccess(rsp, file, fileList) {
      if (rsp.success) {
        this.$message({
          type: 'success',
          message: '上传成功',
        })
        this.$set(this.form, 'annexName', rsp.data.annexName)
        this.$set(this.form, 'annexUrl', rsp.data.annexUrl)
        return
      }
      this.$message({
        type: 'error',
        message: rsp.message,
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
